<template>
  <div class="content" v-loading="loading">
    <el-row>
      <div style="display: flex;flex-wrap: wrap">
        <div class="info-item">
          <span class="label">项目状态：</span>
          <span class="value">{{ info.status_text || "--" }}</span>
        </div>
        <div class="info-item progress">
          <span class="label">项目完成度：</span>
          <span class="value"><el-progress  :percentage="info.percent" :stroke-width="15"></el-progress></span>
        </div>
        <div class="info-item">
          <span class="label">项目名称：</span>
          <span class="value">{{ info.name || "--" }}</span>
        </div>
        <div class="info-item">
          <span class="label">项目编号：</span>
          <span class="value">{{ info.project_number || "--" }}</span>
        </div>
        <div class="info-item">
          <span class="label">施工地点：</span>
          <span class="value">{{ info.province_name + info.city_name + info.county_name + info.address || "--" }}</span>
        </div>
        <div class="info-item">
          <span class="label">进度状态：</span>
          <span class="value">{{ info.schedule_text || "--" }}</span>
        </div>
        <div class="info-item">
          <span class="label">项目负责人：</span>
          <span class="value">{{ info.user_name || "--" }}</span>
        </div>
        <div class="info-item">
          <span class="label">项目协助人：</span>
          <span class="value">{{ info.users?info.users.map(item=>{return item.user_name}).join(' ') : "--" }}</span>
        </div>
        <div class="info-item">
          <span class="label">订单号：</span>
          <span class="value">{{ info.order_number || "--" }}</span>
        </div>
        <div class="info-item">
          <span class="label">所属区域：</span>
          <span class="value">{{ info.zone_name || "--" }}</span>
        </div>
      </div>

      <el-divider></el-divider>

      <div style="display: flex;flex-wrap: wrap;margin-top: 25px">
        <div class="info-item">
          <span class="label">计划开始时间：</span>
          <span class="value">{{ info.plan_start_at || "--" }}</span>
        </div>
        <div class="info-item">
          <span class="label">计划结束时间：</span>
          <span class="value">{{ info.plan_complete_at || "--" }}</span>
        </div>
        <div class="info-item">
          <span class="label">实际开始时间：</span>
          <span class="value">{{ info.start_at || "--" }}</span>
        </div>
        <div class="info-item">
          <span class="label">实际完成时间：</span>
          <span class="value">{{ info.complete_at || "--" }}</span>
        </div>
        <div class="info-item">
          <span class="label">计划工期：</span>
          <span class="value">{{ info.plan_day || "--" }} 天</span>
        </div>
        <div class="info-item">
          <span class="label">实际工期：</span>
          <span class="value">{{ info.work_day || "--" }} 天</span>
        </div>
        <div class="info-item">
          <span class="label">创建人：</span>
          <span class="value">{{ info.create_user_name || "--" }}</span>
        </div>
        <div class="info-item">
          <span class="label">创建时间：</span>
          <span class="value">{{ info.create_at || "--" }}</span>
        </div>
        <div class="info-item">
          <span class="label">计划工时：</span>
          <span class="value">{{ info.plan_work_hour + 'h' || "--" }}</span>
        </div>
        <div class="info-item">
          <span class="label">已耗费：</span>
          <span class="value">{{ info.spent + 'h' || "--" }}</span>
        </div>
        <div class="info-item">
          <span class="label">预计剩余：</span>
          <span class="value"
                :style="{color:info.percent_residue<0?'red':''}">
            {{info.percent_residue > 0 ? info.percent_residue : 0 }}%</span>
        </div>
        <div class="info-item">
          <span class="label">入场时间：</span>
          <span class="value">{{ info.entry_at || "--" }}</span>
        </div>
      </div>
      <el-divider></el-divider>
      <div style="display: flex;flex-wrap: wrap;margin-top: 25px">
        <div class="info-item">
          <span class="label">描述说明：</span>
          <span class="value">{{ info.description || "--" }}</span>
        </div>
      </div>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "index",
  props: ['id'],
  data() {
    return {
      info: {},
      loading: false,
    }
  },
  mounted() {
    this.handleQuery()
  },
  methods: {
    async handleQuery() {
      this.loading = true
      const res = await this.$http.get(`/projects/${this.id}`)
      res.data.success ? this.info = res.data.data : this.$message.error(res.data.msg)
      this.loading = false
    },
  },
}
</script>

<style scoped lang="scss">
.content {
  height: calc(100vh - 220px);
  overflow: auto;
  margin-top: 20px;

  .info-item {
    min-height: 20px;
    display: flex;
    align-items: flex-start;
    margin-bottom: 20px;
    width: 39%;

    .label {
      display: inline-block;
      font-size: 16px;
      color: rgb(0 0 0 / .5);
      width: 120px;
      text-align: right;
      display: flex;
      justify-content: space-between;
    }

    > span:nth-child(2) {

    }

    .value {
      display: block;
      flex: 1;
      margin-top: 2px;
    }

  }

}

::v-deep .el-progress__text{
  margin-left: 8px;
}
</style>
